<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
    @close="resetForm"
  >
    <el-table
      border
      :data="formData.prices"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="name"
        label="阶梯水价起"
      >
        <template #default="{row}">
          <el-input v-model="row.start" type="number" placeholder="阶梯水价起" clearable>
            <template slot="append">m³</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="阶梯水价止"
      >
        <template #default="{row}">
          <el-input v-model="row.end" type="number" placeholder="阶梯水价止" clearable>
            <template slot="append">m³</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="date"
        label="阶梯水价"
      >
        <template #default="{row}">
          <el-input v-model="row.price" type="number" placeholder="阶梯水价" clearable style="text-align:center;">
            <template slot="append">元</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="操作"
        align="center"
        width="100"
      >
        <template slot="header">
          <el-link type="primary" icon="el-icon-plus" @click="addRow">添加</el-link>
        </template>
        <template #default="{$index}">
          <el-link type="danger" icon="el-icon-delete" @click="delRow($index)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="h12" />
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-dialog>
</template>

<script>
import UploadMixin from '@/mixin/UploadMixin'
export default {
  mixins: [UploadMixin],
  data() {
    return {
      title: '新增记录',
      dialogVisible: false,
      statuses: [{ value: 1, text: '正常' }, { value: 0, text: '异常' }],
      formData: {
        id: '',
        prices: []
      }
    }
  },
  methods: {
    show(row) {
      if (row) {
        this.formData = row
        this.title = '修改记录'
      }
      this.dialogVisible = true
    },
    hide() {
      this.dialogVisible = false
    },
    addRow() {
      this.formData.prices.push({
        start: '',
        end: '',
        price: ''
      })
    },
    delRow(index) {
      this.formData.prices.splice(index, 1)
    },
    submitForm(formName) {
      this.$emit('submitForm', this.formData)
      this.dialogVisible = false
    },
    resetForm() {
      this.formData = {
        id: '',
        prices: []
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
